<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>聚衣商城</title>
    <link rel="stylesheet" href="../../lib/css/reset.min.css">
    <link rel="stylesheet" href="../../css/all.min.css">
    <link rel="stylesheet" href="../../lib/css/elementui.min.css">
    <link rel="stylesheet" href="../../lib/css/fonts/element-icons.ttf">
    <link rel="stylesheet" href="../../lib/css/fonts/element-icons.woff">
</head>

<body>
    <div class="app-wrap" v-cloak id="settings">
        <header-top></header-top>
        <div class="bg_red">
            <div class="container">
                <a href="#"></a>
                <div class="header_main">
                    <span class="me">我的聚衣</span>
                    <span class="back">返回聚衣首页</span>
                </div>
                <ul class="list clear">
                    <li>首页</li>
                    <li>账户管理<i class="icon-down_1"></i></li>
                    <li>消息</li>
                </ul>
                <div class="input_group">
                    <input type="text" placeholder="搜索 商品">
                    <button>搜索</button>
                </div>
            </div>
        </div>
        <div class="settings-warp  bg-f2f2f2">
            <div class="container pt-20 bg-f2f2f2 clear">
                <!-- 左侧控制台 -->
                <div class="panel fl">
                    <dl class="section">
                        <dt><em class="icon-panel-setting"></em>设置</dt>
                        <dd><a href="javascript:;" @click="switchPages(0)" :class="{cur:pageType==0}">个人信息</a></dd>
                        <dd><a href="javascript:;" @click="switchPages(1)" :class="{cur:pageType==1}">账户安全</a></dd>
                        <dd><a href="javascript:;" @click="switchPages(2)" :class="{cur:pageType==2}">收货地址</a></dd>
                        <dd><a href="javascript:;" @click="switchPages(3)" :class="{cur:pageType==3}">发票地址</a></dd>
                        <dd><a href="javascript:;" @click="switchPages(4)" :class="{cur:pageType==4}">我的银行卡</a></dd>
                    </dl>
                </div>
                <!-- 右侧主体 -->
                <div class="main fr">
                    <!-- 头部导航 -->
                    <div class="topNav" v-if="pageType==0">
                        <span>基本信息</span>
                    </div>
                    <div class="topNav" v-if="pageType==1">
                        <button>账户安全</button>
                    </div>

                    <div class="topNav" v-if="pageType==2">
                        <button>新增收货地址</button>
                    </div>

                    <div class="topNav" v-if="pageType==3">
                        <button>新增发票地址</button>
                    </div>
                    <div class="topNav" v-if="pageType==4">
                        <span>我的银行卡</span>
                    </div>

                    <div class="topNav" v-if="pageType==5">
                        <span @click="switchPages(1)">账户安全></span>
                        <span>修改登录密码</span>
                    </div>
                    <div class="topNav" v-if="pageType==6">
                        <span @click="switchPages(1)">账户安全></span>
                        <span>修改已验证手机号</span>
                    </div>
                    <div class="topNav" v-if="pageType==7">
                        <span @click="switchPages(1)">账户安全></span>
                        <span>设置支付密码</span>
                    </div>
                    <div class="topNav" v-if="pageType==8">
                        <span @click="switchPages(1)">账户安全></span>
                        <span>修改支付密码</span>
                    </div>
                    <!-- 内容 -->
                    <div class="content-wrap" :class="pageType==2||pageType==3?'mt-no':''">
                        <!-- 个人信息 -->

                        <!-- 头像 -->
                        <div class="avatar-wrap" v-if="pageType==0">
                            <div class="avatar">
                                <div class="edit-wrap">
                                    <common-logo :preimg="logo" :testoption="{maxlength:1,minwidth:100,minheight:100,proportion:1}"></common-logo>
                                    <span class="edit">编辑头像</span>
                                </div>
                                <em class="level">{{userInfo.level}}</em>
                            </div>
                        </div>

                        <!-- 基础信息 -->
                        <div class="baseInfo-wrap" v-if="pageType==0">
                            <div class="sex">
                                <span class="name">性别：</span>
                                <div class="radio">
                                    <label><input type="radio" v-model="userInfo.sex" name="sex" value="1" :checked="(userInfo.sex == 1)||false">&nbsp;男</label>
                                </div>
                                <div class="radio">
                                    <label><input type="radio" v-model="userInfo.sex" name="sex" value="2" :checked="(userInfo.sex == 2)||false">&nbsp;女</label>
                                </div>
                            </div>
                            <div class="level">
                                <span class="name">会员等级：</span>
                                <span>{{userInfo.level}}</span>
                            </div>
                            <!-- 保存按钮 -->
                            <button class="save" @click="saveUser">保存</button>
                        </div>


                        <!-- 账户安全 -->

                        <div class="accSecurity-wrap" v-if="pageType==1">
                            <div class="section">
                                <div class="icons">
                                    <em class="icon-accSecurity-loginPwd"></em>
                                </div>
                                <p class="txt">
                                    <span>登录密码</span>
                                    <span>互联网账号存在被盗风险，建议您定期更换新密码以保护账户安全。</span>
                                </p>
                                <div class="btns">
                                    <span @click="switchPages(5)">修改</span>
                                </div>
                            </div>
                            <div class="section">
                                <div class="icons">
                                    <em class="icon-accSecurity-tel"></em>
                                </div>
                                <p class="txt">
                                    <span>手机验证</span>
                                    <span>您验证的手机：138****7876 若已丢失或停用，请立即更换。</span>
                                </p>
                                <div class="btns">
                                    <span @click="switchPages(6)">修改</span>
                                </div>
                            </div>
                            <div class="section">
                                <div class="icons">
                                    <em class="icon-accSecurity-payPwd"></em>
                                </div>
                                <p class="txt">
                                    <span>支付密码</span>
                                    <span>建议您定期更换新的支付密码，提高安全性。</span>
                                </p>
                                <!-- 还未设置过支付密码 -->
                                <div class="btns" v-if="isFirstPayPwd">
                                    <button @click="switchPages(7)">支付密码管理</button>
                                </div>
                                <!-- 已经设置过支付密码 -->
                                <div class="btns" v-else>
                                    <button @click="switchPages(8)">修改支付密码</button>
                                </div>
                            </div>
                        </div>

                        <!-- 收货地址 -->
                        <div class="address-wrap" v-if="pageType==2">
                            <div class="section">
                                <div class="top">
                                    <h1 class="name">梁家辉</h1>
                                    <span class="tag">默认抬头</span>
                                </div>
                                <div class="tex-wrap">
                                    <p class="txt">
                                        <span class="key">收货人：</span>
                                        <span class="val">梁家辉</span>
                                    </p>
                                    <p class="txt">
                                        <span class="key">所在地区：</span>
                                        <span class="val">江苏南京市秦淮区</span>
                                    </p>
                                    <p class="txt">
                                        <span class="key">地址：</span>
                                        <span class="val">将军大道09号软件园29栋2908室</span>
                                    </p>
                                    <p class="txt">
                                        <span class="key">手机：</span>
                                        <span class="val">132****6545</span>
                                    </p>
                                </div>
                                <div class="close">
                                    <em class="icon-addClose"></em>
                                </div>
                                <div class="edit">
                                    <span>设置默认</span>
                                    <span>编辑</span>
                                </div>
                            </div>

                        </div>

                        <!-- 发票地址 -->
                        <div class="invoice-wrap" v-if="pageType==3">
                            <div class="section">
                                <div class="top">
                                    <h1 class="name">发票抬头：个人</h1>
                                    <span class="tag">默认地址</span>
                                </div>
                                <div class="tex-wrap">
                                    <h2 class="txt-hd">发票内容：</h2>
                                    <p class="txt">
                                        <span class="key">姓名：</span>
                                        <span class="val">张静初</span>
                                    </p>
                                </div>
                                <div class="close">
                                    <em class="icon-addClose"></em>
                                </div>
                                <div class="edit">
                                    <span>设置默认</span>
                                    <span>编辑</span>
                                </div>
                            </div>
                            <div class="section">
                                <div class="top">
                                    <h1 class="name">发票抬头：单位名</h1>
                                    <span class="tag">默认地址</span>
                                </div>
                                <div class="tex-wrap">
                                    <h2 class="txt-hd">发票内容：</h2>
                                    <p class="txt">
                                        <span class="key">单位名称：</span>
                                        <span class="val">北京信息技术科技有限责任公司</span>
                                    </p>
                                    <p class="txt">
                                        <span class="key">纳税人识别号：</span>
                                        <span class="val">23123123123123</span>
                                    </p>
                                </div>
                                <div class="close">
                                    <em class="icon-addClose"></em>
                                </div>
                                <div class="edit">
                                    <span>设置默认</span>
                                    <span>编辑</span>
                                </div>
                            </div>
                        </div>

                        <!-- 我的银行卡 -->
                        <div class="bankcard-wrap" v-if="pageType==4">
                            <div class="section">
                                <div class="hd">
                                    <div class="hd-logo">
                                        <img src="../../img/bank1.png" alt="">
                                    </div>
                                    <span class="hd-num">尾号0909</span>
                                </div>
                                <div class="bd">
                                    <div class="txt-wrap">
                                        <p class="txt">
                                            <span class="key">持卡人姓名：</span>
                                            <span class="val">*小米</span>
                                        </p>
                                        <p class="txt">
                                            <span class="key">手机号：</span>
                                            <span class="val">132****1234</span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="addCard">
                                <em class="icon-addCard"></em>
                                <span>添加银行卡</span>
                            </div>
                        </div>

                        <!-- 账户安全>修改登录密码 -->

                        <!-- 账户提交表单 -->
                        <div class="accForm-wrap" v-if="pageType==5">
                            <div class="cell">
                                <span class="title">已绑定手机号：</span>
                                <span class="value">189****9090</span>
                            </div>
                            <div class="cell">
                                <span class="title">短信验证码：</span>
                                <div class="input-area">
                                    <input type="text" class="verCode">
                                    <span class="button">获取短信验证码</span>
                                </div>
                            </div>
                            <div class="cell">
                                <span class="title">原有的登录密码：</span>
                                <div class="input-area">
                                    <input type="password">
                                </div>
                            </div>
                            <div class="cell">
                                <span class="title">设置新的登录密码：</span>
                                <div class="input-area">
                                    <input type="password">
                                </div>
                            </div>
                            <div class="cell">
                                <span class="title">确认新的登录密码：</span>
                                <div class="input-area">
                                    <input type="password">
                                </div>
                            </div>
                            <div class="cell">
                                <span class="title"></span>
                                <span class="submit-btn">提交</span>
                            </div>

                        </div>


                        <!-- 账户安全>修改已验证手机号码 -->
                        <div class="accForm-wrap" v-if="pageType==6">
                            <h1 class="cell-title">第一步：验证现有手机号</h1>
                            <div class="cell">
                                <span class="title">原有的登录密码：</span>
                                <div class="input-area">
                                    <input type="password">
                                </div>
                            </div>
                            <div class="cell">
                                <span class="title">已绑定手机号：</span>
                                <span class="value">189****9090</span>
                            </div>
                            <div class="cell">
                                <span class="title">短信验证码：</span>
                                <div class="input-area">
                                    <input type="text" class="verCode">
                                    <span class="button">获取短信验证码</span>
                                </div>
                            </div>
                            <h1 class="cell-title">第二步：验证新手机号</h1>
                            <div class="cell">
                                <span class="title">新输入新手机号：</span>
                                <div class="input-area">
                                    <input type="text">
                                </div>
                            </div>
                            <div class="cell">
                                <span class="title">短信验证码：</span>
                                <div class="input-area">
                                    <input type="text" class="verCode">
                                    <span class="button">获取短信验证码</span>
                                </div>
                            </div>
                            <div class="cell">
                                <span class="title"></span>
                                <span class="submit-btn">绑定新手机号</span>
                            </div>
                        </div>

                        <!-- 设置支付密码 -->
                        <div class="accForm-wrap" v-if="pageType==7">
                            <div class="cell">
                                <span class="title">请输入登录密码：</span>
                                <div class="input-area">
                                    <input type="password">
                                </div>
                            </div>
                            <div class="cell">
                                <span class="title">已验证手机号：</span>
                                <span class="value">189****9090</span>
                            </div>
                            <div class="cell">
                                <span class="title">短信验证码：</span>
                                <div class="input-area">
                                    <input type="text" class="verCode">
                                    <span class="button">获取短信验证码</span>
                                </div>
                            </div>
                            <div class="cell">
                                <span class="title">设置支付密码：</span>
                                <div class="input-area">
                                    <input type="password">
                                </div>
                            </div>
                            <div class="cell">
                                <span class="title">确认支付登录密码：</span>
                                <div class="input-area">
                                    <input type="password">
                                </div>
                            </div>
                            <div class="cell">
                                <span class="title"></span>
                                <span class="submit-btn">提交</span>
                            </div>
                        </div>

                        <!-- 修改支付密码 -->
                        <div class="accForm-wrap" v-if="pageType==8">
                            <h1 class="cell-title">第一步：验证现有支付密码</h1>
                            <div class="cell">
                                <span class="title">请输入支付密码：</span>
                                <div class="input-area">
                                    <input type="password">
                                </div>
                            </div>
                            <div class="cell">
                                <span class="title">已验证手机号：</span>
                                <span class="value">189****9090</span>
                            </div>
                            <div class="cell">
                                <span class="title">短信验证码：</span>
                                <div class="input-area">
                                    <input type="text" class="verCode">
                                    <span class="button">获取短信验证码</span>
                                </div>
                            </div>
                            <h1 class="cell-title">第二步：修改支付密码</h1>
                            <div class="cell">
                                <span class="title">新输入新的支付密码：</span>
                                <div class="input-area">
                                    <input type="text">
                                </div>
                            </div>
                            <div class="cell">
                                <span class="title">确认新的支付密码：</span>
                                <div class="input-area">
                                    <input type="text">
                                </div>
                            </div>
                            <div class="cell">
                                <span class="title"></span>
                                <span class="submit-btn">提交</span>
                            </div>
                        </div>
                        <common-page v-if="pageType==2" style="padding-top:0;padding-bottom:20px;padding-right:20px;" :current="1" :all="100"></common-page>
                    </div>

                </div>
            </div>

        </div>
        <!-- 页脚 -->
        <com-footer></com-footer>
    </div>
    <script src="../../lib/js/vue.js"></script>
    <script src="../../lib/js/axios.min.js"></script>
    <!-- mock 数据 打包发布的时候记得移除 -->
    <script src="../../lib/js/mock.js"></script>
    <script src="../../js/all.min.js"></script>
    <script src="../../lib/js/elementui.min.js"></script>
    <script>
        settings();
    </script>
</body>

</html>